<script setup lang="ts">
import { computed } from "vue";
import { storeToRefs } from "pinia";
import CountCard from "@/views/main/analysis/dashboard/c-cpns/count-card.vue";
import {
  BarEcharts,
  LineEcharts,
  MapEcharts,
  PieEcharts,
  RoseEcharts
} from "@/components/page-echarts";
import useAnalysisStore from "@/stores/modules/main/analysis/analysis";
import ChartsCard from "@/views/main/analysis/dashboard/c-cpns/charts-card.vue";

const analysisStore = useAnalysisStore();
analysisStore.fetchAmountListDataAction();
const { amountList, goodsCategoryCount, salesCount, favorsCount, citiesGoodsCount } =
  storeToRefs(analysisStore);

const showGoodsCategoryCount = computed(() => {
  return goodsCategoryCount.value.map((item) => {
    return {
      name: item.name,
      value: item.goodsCount
    };
  });
});
const showGoodsCategorySale = computed(() => {
  const labels = salesCount.value.map((item) => item.name);
  const values = salesCount.value.map((item) => item.goodsCount);
  return { labels, values };
});
const showGoodsCateFavor = computed(() => {
  const labels = favorsCount.value.map((item) => item.name);
  const values = favorsCount.value.map((item) => item.goodsFavor);
  return { labels, values };
});
const showCitiesGoodsCount = computed(() => {
  return citiesGoodsCount.value.map((item) => {
    return {
      name: item.address,
      value: item.count
    };
  });
});
</script>

<template>
  <div class="dashboard">
    <!--  第一行-->
    <el-row :gutter="10">
      <template v-for="item in amountList" :key="item.amount">
        <el-col :span="6">
          <count-card v-bind="item" />
        </el-col>
      </template>
    </el-row>
    <!--  第二行-->
    <el-row :gutter="10">
      <el-col :span="7" :xs="24" :sm="12" :md="7">
        <ChartsCard title="分类商品数量(饼图)">
          <template #echarts>
            <PieEcharts :showGoodsCategoryCount="showGoodsCategoryCount"></PieEcharts>
          </template>
        </ChartsCard>
      </el-col>
      <el-col :span="10" :xs="24" :sm="12" :md="10">
        <ChartsCard title="不同城市商品销量">
          <template #echarts>
            <MapEcharts :showCitiesGoodsCount="showCitiesGoodsCount"></MapEcharts>
          </template>
        </ChartsCard>
      </el-col>
      <el-col :span="7" :xs="24" :sm="12" :md="7">
        <ChartsCard title="分类商品数量(玫瑰图)">
          <template #echarts>
            <RoseEcharts
              seriesName="数量"
              :showGoodsCategoryCount="showGoodsCategoryCount"
            ></RoseEcharts>
          </template>
        </ChartsCard>
      </el-col>
    </el-row>
    <!--  第三行-->
    <el-row :gutter="10">
      <el-col :span="12">
        <ChartsCard title="分类商品的销量">
          <template #echarts>
            <LineEcharts :showGoodsCategorySale="showGoodsCategorySale"></LineEcharts>
          </template>
        </ChartsCard>
      </el-col>
      <el-col :span="12">
        <ChartsCard title="分类商品的收藏">
          <template #echarts>
            <BarEcharts :showGoodsCateFavor="showGoodsCateFavor"></BarEcharts>
          </template>
        </ChartsCard>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.el-row {
  margin-bottom: 10px;
}
</style>
